<template>
  <div>
    <el-tabs v-model="defaultActive" @tab-click="handleClick" :type="tabs.type ? tabs.type:''">
      <el-tab-pane :label="row.label" :name="row.prop" v-for="(row,index) of tabs.tabPane" :key="index">
        <div v-if="row.text">
          <span>
            <a href="/#" :class="row.style ? row.style:null" @click="row.click">{{row.text}}</a>
          </span>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>


<script>

  export default {
    name: '',
    props: {
      tabs: {
        defaultActiveName: null,
        tabPane: []
      }
    },
    watch: {
      'tab.defaultActiveName': {
        handler(val) {
          if (val === null) this.defaultActive = this.tabs.tabPane[0].prop;
          else
            this.chooseDefaultActive()
        }
      }
    },
    mounted() {
      this.chooseDefaultActive()
    },
    data() {
      return {
        defaultActive: null,
        style: {'a:hover': 'color:red'}
      }
    },
    methods: {
      handleClick(tab, event) {
        this.$emit('getTabsName', tab.name)
      },

      chooseDefaultActive() {
        if (!this.tabs.tabPane) return;
        if (!this.tabs.defaultActiveName) {
          this.defaultActive = this.tabs.tabPane[0].prop;
        }
        if (this.tabs.defaultActiveName) {
          this.defaultActive = this.tabs.tabPane[this.tabs.defaultActiveName].prop;
        }
        this.$emit('getTabsName', this.defaultActive)
      }

    }
  }

</script>


<style scoped lang="scss">
  .test {
    a:hover {
      color: red
    }
  }
</style>
